<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		
		.box {
			padding: 10px;
		}

		.box label {
			float: left;
			margin-right: 10px;
		}

		.box input,
		.box select,
		.box textarea {
			border: 1px solid silver;
			padding: 5px;
			width: 500px;
		}

		.tbbox table {
			border-collapse: collapse;
			margin-top: 20px;
		}

		.tbbox table td,
		.tbbox table th {
			border: 1px solid #D1d1d1;
			padding: 3px 10px;
			text-align: center;
		}

	</style>
</head>

<body>
	<form>
		
		<div class="box">
			<label>标题</label>
			<input type="text" name="title" value="户外垃圾"/>
		</div>
		<div class="box">
			<label>描述</label>
			<textarea rows="5" name="desc">乱扔乱放</textarea>
		</div>
		<div class="box">
			<label>类别</label>
			<select name="type">
				<option checked>安全隐患排查</option>
				<option >社会治安寻访</option>
				<option >矛盾排查化解</option>
				<option >城乡治理协管</option>
			</select>
		</div>
		<div >
			紧急程度
			<label><input type="radio" name="urgent" value="一般" checked/>一般 </label>
			<label><input type="radio" name="urgent" value="紧急" />紧急 </label>
			<label><input type="radio" name="urgent" value="特级" />特级 </label>
		</div>
		<div >
			分发对象
			<label><input type="checkbox" name="goal" value="网格长" />网格长 </label>
			<label><input type="checkbox" name="goal" value="镇街网格" />镇街网格 </label>
			<label><input type="checkbox" name="goal" value="区网格" />区网格  </label>
		</div>
		<div class="box">
			<button type="submit" id="submitBtn">提交</button>
			<button type="reset">重置</button>
			<button type="button">取消</button>
		</div>
	</form>
	<div class="tbbox">
		<div class="box">
			<button type="button">新增</button>
			<button type="button">删除</button>
		</div>
		<h4>我的事件清单</h4>
		<table width="1200">
			<tr>
				<th><input type="checkbox" value="" /></th>
				<th>标题</th>
				<th>类别</th>
				<th>紧急程度</th>
				<th>分发对象</th>
				<th>操作</th>
			</tr>
			<tr>
				<td><input type="checkbox" value="" /></td>
				<td>标题1</td>
				<td>安全隐患排查</td>
				<td>一般</td>
				<td>网格长</td>
				<td><button type="button">查看</button><button type="button">编辑</button><button type="button">删除</button></td>
			</tr>
			<tr>
				<td><input type="checkbox" value="" /></td>
				<td>标题2</td>
				<td>社会治安寻访</td>
				<td>特级</td>
				<td>镇街网格</td>
				<td><button type="button">查看</button><button type="button">编辑</button><button type="button">删除</button></td>
			</tr>
		</table>


	</div>
	<script>
		/**
		*
		1、点击新增，表单显示，表单元素每项都为必填，且标题不能重复
		2、点击删除，判断表格中的多选框选择情况，如果全选则所有复选框勾选并删除所有记录，非全选删除部分
		3、列表中的数据 为标题、类别、紧急程度、分发对象 （以逗号分隔） 
		4、列表中的操作为 查看： 弹出相关信息 含描述 ；编辑：将数据回显在表单上，标题不可编辑 删除：删除本行数据
		5、表单中的提交功能：表单隐藏，列表中显示相关信息
		   重置：重置表单
			 取消：表单隐藏
		6、 其他功能以视频为准
		7、此练习难度5星 初学者不做要求
		*/
	</script>
</body>

</html>
